<template>
  <div id="login">
    <!-- 头部 -->
    <div class="lg-head">
      <a href="#/myself1">
        <span class="lg-icon-1"></span>
      </a>
      <span class="lg-head-title">京东登录</span>
    </div>
    <!-- 下半部分  -->
    <div class="lg-continer">
      <!-- 输入内容 -->
      <div class="lg-contain">
        <div class="users">
          <input type="text" placeholder="用户名/邮箱/已验证手机" v-model="username">
        </div>
        <div class="psd">
          <input type="password" placeholder="请输入密码" v-model="psw">
          <div class="change-eye"></div>
          <button>忘记密码</button>
        </div>
        <span class="reminder" v-if="data==null">用户名或密码错误</span>
      </div>
      <!-- 按钮部分 -->
      <div class="lg-btn">
        <div class="btn1">
          <span @click="lg">登录</span>
          <span>一键登录</span>
        </div>
        <div class="btn2">
          <a href>短信验证码登录</a>
          <a href="#/registered">手机快速注册</a>
        </div>
      </div>
      <!-- 底部 -->
      <div class="lg-bottom">
        <div class="other-lg">
          <h4>其他登录方式</h4>
          <a href>
            <i class="qq"></i>
            <span>QQ</span>
          </a>
          <a href>
            <i class="weixin"></i>
            <span>微信</span>
          </a>
        </div>
        <div class="lg-ft">
          <p>
            登录即代表您已同意
            <a href>京东隐私政策</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      psw: "",
      data: ""
    };
  },
  methods: {
    lg() {
      this.axios
        .post("/dl", {
          username: this.username,
          psw: this.psw
        })
        .then(ret => {
          let { data } = ret.data;
          this.data = data;
          if (data !== null) {
            this.$router.push({
              name: "myself"
            });
          }
        })
        .catch(ret => {
        });
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
#login {
  width: 750px;
  // 顶部
  .lg-head {
    width: 750px;
    //border: 1px solid red;
    height: 88px;
    line-height: 88px;
    width: 100%;
    font-size: 30px;
    background-color: #fff;
    position: relative;
    .lg-icon-1 {
      display: inline-block;
      width: 48px;
      height: 48px;
      background: url(../image/login/icon_arrow_down1.png) no-repeat 0px center;
      background-size: 18px 28px;
      position: absolute;
      top: 0px;
      left: 40px;
    }
    .lg-head-title {
      display: block;
      text-align: center;
      height: 48px;
      line-height: 48px;
      margin: 20px auto;
      font-size: 32px;
    }
  }
  // 第二部分 输入信息部分
  .lg-continer {
    width: 650px;
    padding: 0px 50px 50px 50px;
    // 信息输入
    .lg-contain {
      input {
        width: 100%;
        border: 0;
        outline: 0;
        font-size: 24px;
      }
      input::-webkit-input-placeholder {
        font-size: 30px;
        line-height: 60px;
        text-indent: 10px;
      }
      .users {
        padding: 20px 0px;
        height: 60px;
        margin-top: 40px;
        border-bottom: 1px solid #ccc;
        input {
          padding-right: 60px;
          height: 60px;
          text-indent: 10px;
        }
      }
      .psd {
        height: 60px;
        padding: 10px 0px;
        margin-top: 40px;
        border-bottom: 1px solid #ccc;
        position: relative;
        input {
          width: 350px;
          padding-right: 300px;
          height: 60px;
          text-indent: 10px;
        }
        .change-eye {
          width: 48px;
          height: 48px;
          position: absolute;
          top: 16px;
          right: 200px;
          background: url(../image/login/3.png) no-repeat;
          background-size: 48px 48px;
        }
        button {
          position: absolute;
          border: 0;
          background: #fff;
          font-size: 28px;
          color: #222;
          border-left: 1px solid #ccc;
          width: 160px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          right: 0px;
          top: 10px;
        }
      }
      .reminder {
        color: red;
        font-size: 26px;
      }
    }
    //按钮
    .lg-btn {
      width: 100%;
      margin-top: 60px;
      .btn1 {
        span {
          display: inline-block;
          width: 100%;
          height: 100px;
          text-align: center;
          line-height: 100px;
          border-radius: 50px;
          font-size: 30px;
        }
        span:nth-of-type(1) {
          background-color: red;
          border: 1px solid red;
          color: #fff;
        }
        span:nth-of-type(1):hover {
          background-color: #ffcaba;
          border: 1px solid#ffcaba;
        }
        span:nth-of-type(2) {
          margin-top: 16px;
          color: red;
          border: 1px solid red;
        }
      }
      .btn2 {
        width: 100%;
        height: 44px;
        margin-top: 40px;
        a {
          display: inline-block;
          color: #999;
          font-size: 28px;
        }
        a:nth-of-type(2) {
          float: right;
        }
      }
    }
    //其他登录方式
    .lg-bottom {
      margin-top: 160px;
      width: 100%;
      border-top: 1px solid #ccc;
      position: relative;
      .other-lg {
        display: flex;
        justify-content: center;
        padding-top: 40px;
        height: 160px;
        h4 {
          width: 200px;
          font-size: 28px;
          font-weight: 400;
          text-align: center;
          color: #ccc;
          position: absolute;
          top: -15px;
          background-color: #fff;
        }
        a {
          display: block;
          width: 88px;
          height: 88px;
          margin: 0px 30px;
          position: relative;
          i {
            display: block;
            width: 96px;
            height: 96px;
            background-size: 100% auto;
          }
          .qq {
            background: url(../image/login/1.png) no-repeat;
            background-size: 96px 96px;
          }
          .weixin {
            background: url(../image/login/2.png) no-repeat;
            background-size: 96px 96px;
          }
          span {
            display: block;
            width: 88px;
            text-align: center;
            font-size: 26px;
            color: #999;
            position: absolute;
            bottom: -45px;
          }
        }
      }
      // 底部
      .lg-ft {
        width: 100%;
        text-align: center;
        font-size: 26px;
        p {
          color: #999;
        }
        a {
          color: #409eff;
        }
      }
    }
  }
}
</style>


